<template>
	<div class="xSelectTime">
		<el-time-picker is-range format="HH:mm" value-format="HH:mm" :size="size" v-model="viewModel" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围"></el-time-picker>
	</div>
</template>
<script>
	export default {
		model: {
			prop: 'dataModel',
			event: 'change'
		},
		props: {
			size: {
				default: 'medium'
			},
			dataModel: {}
		},
		data() {
			return {
				viewModel: ''
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				if (this.dataModel.length !== 0) {
					this.viewModel = this.dataModel
				} else {
					this.viewModel = ''
				}
			}
		},
		watch: {
			viewModel: {
				deep: true,
				handler(val) {
					this.$emit('change', this.viewModel)
				}
			}
		}
	}
</script>
<style lang="scss">
	.xSelectTime {
		.el-date-editor .el-range-separator {
			width: 60px;
		}

		.el-date-editor--timerange.el-input__inner {
			width: 100%;
			max-width: 300px;
		}
	}
</style>